<style lang="scss" scoped>
.box {
    width: 100vw;
    height: 100vh;
    background-color: #ececec;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.divHead {
    overflow-y: scroll;
    width: 100vw;
    height: 80vh;
}

.divitemJia {
    border-bottom: 1px solid #ccc;
    background: #fff;
    width: 98%;
    border-radius: 10px;
    margin-left: 1%;
    margin-top: 10px;

    p {
        padding: 10px;
    }

    span {
        padding: 10px;
        display: flex;
    }

    .divitem {
        display: flex;
        justify-content: space-between;
    }

    ul {
        display: flex;
        flex-wrap: wrap;
        width: 100vw;
        height: 400px;

        li {
            width: 100%;
            height: 400px;

            img {
                width: 90%;
                height: 400px;
            }
        }
    }
}

.tabs {
    background-color: #fff;
    flex-wrap: wrap;
    /* 阻止文本自动换行 */
    // overflow-x: auto;
    /* 当内容超出容器宽度时，显示水平滚动条 */
    display: flex;
    /* 使用弹性布局 */
    // align-items: center;
    /* 垂直居中对齐 */
    padding: 8px;
    /* 添加内边距，让内容与容器边缘有一定的距离 */
    // text-align: center;
}

.tab {
    padding: 5px 10px;
    margin-bottom: 5px;
    margin-left: 10px;
    background-color: #ececec;
    border-radius: 50px;
}


.active {
    background-color: rgb(30, 112, 255);
    color: #fff;
}
</style>
<template>
    <div class="box">
        <van-nav-bar title="锦旗" class="navBar" left-text="返回" left-arrow @click-left="router.go(-1)" />
        <div class="tabs">
            <div v-for="(tab, index) in listTap" :key="index" class="tab" :class="{ active: currentIndex === index }"
                @click="headerTap(tab.bannerstate as any, index)">
                {{ tab.bannerstate }}
            </div>
        </div>
        <div class="divHead">
            <div class="divitemJia" v-for="(v, i) in ListData" :key="i">
                <div class="divitem">
                    <p>{{ v.banviewname }}用户**</p>
                </div>
                <ul style="display: flex;">
                    <li style="text-align: center; border: none;">
                        <img :src="v.banviewimage" alt="">
                    </li>
                </ul>
                <p>感谢{{ doctorListitem?.doctorname }}医生的回复~</p>
                <span>{{ v?.banviewtimer }}</span>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import router from '@/router';
import type { ListDatagete } from '@/Type/indeType';
import axios from 'axios';
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';

const route = useRoute()
const listId = ref(route.query.id as string | undefined);
// defineProps(['img'])

const doctorListitem = ref<ListDatagete | null>(null);
const getData = () => {
    axios.get('/api/doctor/detail', { params: { id: listId.value } }).then(res => {
        doctorListitem.value = res.data.data[0]
    })
}
getData()
interface qweList {
    bannerstate: string | string[]
}
const listTap = ref<qweList[]>([])
const headerText = ref('')
const currentIndex = ref(0);
const headerTap = (v: string, i: number) => {
    currentIndex.value = i
    headerText.value = v
    getList(v)
}

interface ListData {
    banviewname: string,
    banviewstate: string,
    banviewtimer: string,
    banviewimage: string,
}
const ListData = ref<ListData[]>([])

axios.get('/api/review/banner',).then(res => {
    listTap.value = res.data.data
})
// bannerstate
const getList = (text: string) => {
    axios.get('/api/review/banview', { params: { id: listId.value, state: text } }).then(res => {
        ListData.value = res.data.data
    })
}
getList('')

</script>